<template>
  <a-layout>
    <a-layout-header>
      <div class="logo" @click="announcement">
        <img
          src="/src/assets/logo2.png"
          alt="logo"
          title="logo"
          style="height: 50px"
        />
      </div>
      <a-menu mode="horizontal" theme="dark" :style="{ lineHeight: '64px' }">
        <a-menu-item style="float: right" @click="exit">退出登录</a-menu-item>
        <a-menu-item key="1" @click="announcement">
          <pie-chart-outlined />
          <span>首页</span>
        </a-menu-item>
        <a-menu-item key="2" @click="releaseDeal">
          <desktop-outlined />
          <span>发布交易</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <user-outlined />
              <span>个人中心</span>
            </span>
          </template>
          <a-menu-item key="3" @click="personalInfo">个人信息</a-menu-item>
          <a-menu-item key="4" @click="myRelease">我的发布</a-menu-item>
          <a-menu-item key="5" @click="myTrading">我的交易</a-menu-item>
          <a-menu-item key="6" @click="myDelivery">我的交割</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <team-outlined />
              <span>链上市场</span>
            </span>
          </template>
          <a-menu-item key="7" @click="allRelease">所有发布</a-menu-item>
          <a-menu-item key="8" @click="energyList"
            >已撮合交易</a-menu-item
          >
          <a-menu-item key="9" @click="KLines">当日交易走势</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
            <span>
              <file-outlined />
              <span>帮助</span>
            </span>
          </template>
          <a-menu-item key="10" @click="referencePrice">参考价格</a-menu-item>
          <a-menu-item key="11" @click="tradeDescription">交易说明</a-menu-item>
          <a-menu-item key="12" @click="contactUs">联系我们</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-header>
    <a-layout style="min-height: 100vh">
      <a-layout>
        <a-layout-content style="margin: 0 16px">
          <div
            :style="{ margin: '10px 0 0 0', background: '#fff', height: '95%' }"
          >
            <router-view></router-view>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { get, del, post, getBlob, tip, removeLocalToken } from "@/common";

export default defineComponent({
  name: "LangSelect",
  props: {
    size: {
      type: String,
      default: "small",
    },
  },
  components: {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
  },
  setup() {
    const getCurrentUser = () => {};
    const router = useRouter();
    const currentUser = ref({});

    // 网页router刷新
    const releaseDeal = () => {
      router.push({ path: "/home/releaseDeal" });
    };
    const announcement = () => {
      router.push({ path: "/home/announcement" });
    };
    const personalInfo = () => {
      router.push({ path: "/home/personalCenter/personalInfo" });
    };
    const myRelease = () => {
      router.push({ path: "/home/personalCenter/myRelease" });
    };
    const myTrading = () => {
      router.push({ path: "/home/personalCenter/myTrading" });
    };
    const energyList = () => {
      router.push({ path: "/home/market/energyList" });
    };
    const myDelivery = () => {
      router.push({ path: "/home/personalCenter/myDelivery" });
    };
    const allRelease = () => {
      router.push({ path: "/home/market/allRelease" });
    };
    const KLines = () => {
      router.push({ path: "/home/market/KLines" });
    };
    const referencePrice = () => {
      router.push({ path: "/home/help/referencePrice" });
    };
    const tradeDescription = () => {
      router.push({ path: "/home/help/tradeDescription" });
    };
    const contactUs = () => {
      router.push({ path: "/home/help/contactUs" });
    };
    const exit = () => {
      // del("/security/home/exit").then((res) => {
      //   removeLocalToken();
      //   router.push("/login");
      // });
      router.push("/login");
    };

    return {
      myDelivery,
      contactUs,
      tradeDescription,
      referencePrice,
      KLines,
      allRelease,
      energyList,
      myTrading,
      myRelease,
      personalInfo,
      releaseDeal,
      announcement,
      getCurrentUser,
      router,
      exit,
      currentUser,
    };
  },

  data() {
    return {
      collapsed: ref(false),
      selectedKeys: ref(["1"]),
    };
  },
});
</script>
<style>
.logo {
  float: left;
  width: 120px;
  height: 31px;
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}
</style>